@import "mixin.styl"

$text-large = px2rem(18)
$text-big = px2rem(16)
$text-medium = px2rem(14)
$text-small = px2rem(12)
$text-tiny = px2rem(10)

$text-large-lh = px2rem(20)
$text-big-lh = px2rem(18)
$text-medium-lh = px2rem(16)
$text-small-lh = px2rem(15)
$text-tiny-lh = px2rem(12)

$text-big-max-height3 = px2rem(54)
$text-medium-max-height3 = px2rem(48)
$text-samll-max-height3 = px2rem(42)
$text-big-max-height2 = px2rem(36)
$text-medium-max-height2 = px2rem(32)
$text-medium-max-height = px2rem(16)
$text-small-max-height2 = px2rem(30)
$text-small-max-height = px2rem(15)
$text-tiny-max-height = px2rem(12)

.title-big
  line-height: $text-big-lh
  font-size: $text-big
  max-height: $text-big-max-height2
  color: #444
  font-weight: bold
  ellipsis2(3)

.title-medium
  font-size: $text-medium
  line-height: $text-medium-lh
  max-height: $text-medium-max-height2
  color: #444
  font-weight: bold
  ellipsis2(3)

.title-small
  font-size: $text-small
  line-height: $text-small-lh
  max-height: $text-small-max-height2
  color: #444
  font-weight: bold
  ellipsis2(2)

.sub-title-medium
  line-height: $text-medium-lh
  font-size: $text-medium
  max-height: $text-medium-max-height2
  color: #666
  ellipsis2(2)

.sub-title
  line-height: $text-small-lh
  font-size: $text-small
  max-height: $text-small-max-height
  color: #666
  ellipsis2(1)

.sub-title-tiny
  line-height: $text-tiny-lh
  font-size: $text-tiny
  max-height: $text-tiny-max-height
  color: #666
  ellipsis2(1)

.third-title
  line-height: $text-small-lh
  font-size: $text-small
  max-height: $text-small-max-height
  color: #999
  ellipsis2(1)

.third-title-tiny
  line-height: $text-tiny-lh
  font-size: $text-tiny
  max-height: $text-tiny-max-height
  color: #999
  ellipsis2(1)
